<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2_回调形式的ref</title>
</head>
<body>
  <!-- 准备一个容器 -->
  <div id="test"></div>

  <!-- 导入react包 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
  // 创建组件
  class Buttons extends React.Component {
    // 展示左侧输入框数据
    showData = ()=>{
      // console.log(this.refs.input1)  // 取到标签
      const {input1} = this
      alert(input1.value)  // 提示弹窗
    }

    // 展示右侧输入框数据
    showData2 = ()=>{
      // console.log(this.refs.input2)  // 取到标签
      const {input2} = this
      alert(input2.value)
    }

    saveInput = (currentNode)=>{
      this.input1 = currentNode
    }

    saveInput2 = (currentNode)=>{
      console.log("this", this)
      // input1为变量名称
      this.input2 = currentNode
      console.log("c", currentNode)
    }

    render (){
      // 其中input1为函数变量名
      return (
        <div>
          <input ref={this.saveInput} type="text" placeholder="点击按钮提示数据"/>  
          <button onClick={this.showData} type="button">点我提示左侧数据</button>
          <input ref={this.saveInput2} onBlur={this.showData2} type="text" placeholder="失去焦点展示数据"/>
        </div>
      )
    }
  }

  // 渲染组件到页面
  ReactDOM.render(<Buttons />, document.getElementById("test"))
  </script>

</body>

</html>